<template>
	<div class="container">
		<div class="jx-container">
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          赠品列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">添加模板</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="55" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="模板ID" width="130" align="center">
          </el-table-column>
          <el-table-column prop="name" label="模板名称" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="content" label="产品清单" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="适用地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="price" label="模板价格" align="center" >
          </el-table-column>
          <el-table-column prop="user" label="创建人" align="center" >
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加模板 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="80%">
      <div slot="title" class="header-title">
        <span class="title-name">添加模板</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="130px" class="jx-form">
        <el-form-item label="模板名称：" prop="name">
          <el-input class="tel-value" v-model="currentRow.name" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="地区选项：" prop="address">
          <el-radio-group v-model="currentRow.address" @change="getActive">
            <el-radio :label="1">不限地区</el-radio>
            <el-radio :label="2">手动添加地区</el-radio>
          </el-radio-group>
          <div class="active-item" v-if="boo.isAddress">
            <div class="select-type">
              <div class="item">
                <span>搜索地区：</span>
                <div class="right">
                  <div class="item-inline">
                    <el-input class="tel-value" v-model="params_adres.address" placeholder="请输入地区"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-button class="jx-btn" type="primary" @click="search_address">搜索</el-button>
                  </div>
                </div>
              </div>
              <div class="item">
                <span>省份：</span>
                <div class="right">
                  <el-checkbox :indeterminate="params_adres.isIndeterminate" v-model="params_adres.checkAll" @change="handleCheckAllChange">安徽省</el-checkbox>
                </div>
              </div>
              <div class="item">
                <span>市：</span>
                <div class="right">
                  <el-checkbox-group v-model="params_adres.checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="(item,index) in params_adres.cities" :key="index" :label="item.val">{{item.label}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="jx-detail" style="padding: 0;">
        <div class="detail-item">
          <div class="item">
            <div class="select-type">
              <div class="item table-item" style="margin: 0;">
                <div class="right" style="padding: 0;">
                  <div class="item-inline">
                    <span>搜索商品：</span>
                    <el-input class="tel-value" v-model="params_product.name" placeholder="请输入商品名称"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-button class="jx-btn" type="primary" @click="search_product">搜索</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="jx-table">
              <el-table :data="shoplist" border style="width: 100%" v-loading="boo.loading">
                <el-table-column type="index" label="序列" width="55" align="center">
                  <template slot-scope="scope">
                    <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="img" label="产品图片" width="130" align="center">
                  <template slot-scope="scope">
                    <img class="logo" :src="scope.row.img"/>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="产品名称" width="150" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="content" label="产品配置清单" width="160" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="address" label="适用地区" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="type" label="商品类型" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="price" label="采购价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sum" label="数量" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="90" align="center">
                  <template slot-scope="scope">
                    <el-button @click="hiddenRow(scope.row)" type="text" size="small">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div v-if="shoplist.length != 0" class="jx-pagination">
                <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_product.page" :page-sizes="[10,50,100]" :page-size="params_product.size" layout="total, sizes, prev, pager, next, jumper"
                  :total="other.allRow_shop">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">确定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import list from 'static/json/finance/give.json'
  import shoplist from 'static/json/product/shoplist.json'
  const cityOptions = [
    {label: '合肥',val: '1'},{label: '芜湖',val: '2'},{label: '安庆',val: '3'},
  ]
	export default {
		data() {
			return {
        https: {
          // list: this.$api.product.supplylist,
          // common: this.$api.common.dict
        },
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
          isAddress: false, // 选择地区
        },
        other: {
          allRow: 1,
          allRow_shop: 1,
        },
        list: list,
        params_list: {
          page: 1,
          size: 10,
        },
        params_adres: {
          address: '',
          name: '不限',
          checkAll: false,
          checkedCities: [],
          cities: cityOptions,
          isIndeterminate: true
        },
        shoplist: shoplist,
        params_product: {
          page: 1,
          size: 10,
          name: ''
        },
        currentRow: {},
        rules: {
          name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
          address: [{ required: true, message: '请选择地区', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          serviceProductName: _self.params_list.name,
          shopProductCatalog: _self.params_list.type,
          orderBy: '',
        }
        // _self.boo.loading = true
        // let success = (res)=>{
        //   res = res.data
        //   if(res.retCode == 1){
        //     _self.servicelist = res.retObject.list
        //     _self.other.allRow = Number(res.retObject.totalRow)
        //   }else{
        //     _self.$message.error(res.retMsg)
        //   }
        //   _self.boo.loading = false
        // }
        // _self.$axios.get(_self.https.list.list, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.boo.showDialog = true
      },
      deleteRow(){
        let _self = this
      },
      getActive(){
        let _self = this
        if(_self.currentRow.address == 2){
          _self.boo.isAddress = true
        }else {
          _self.boo.isAddress = false
        }
      },
      search_address(){},
      handleCheckAllChange(val) {
        let _self = this                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
        let arr = []
        _self.params_adres.cities.forEach(item => {
          arr.push(item.val)
        })
        _self.params_adres.checkedCities = val ? arr : [];
        _self.params_adres.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let _self = this
        let checkedCount = value.length;
        _self.params_adres.checkAll = checkedCount === _self.params_adres.cities.length;
        _self.params_adres.isIndeterminate = checkedCount > 0 && checkedCount < _self.params_adres.cities.length;
      },
      search_product(){},
      hiddenRow(){},
      submitRow(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
  /deep/ .jx-dialog .el-dialog__body
    padding: 50px
  .active-item
    margin: 0 auto
    padding: 10px
    .select-type .item
      margin-bottom: 10px
    .select-type .item .right span
      padding: 0
      margin-right: 12px
      font-size: 17px
    .select-type .item .right span.active
      color: #333
      border: 0
      background: #fff
      font-size: 18px
      font-weight: 600
    .select-type 
      .el-input--small
        width: 100%
      .jx-btn.el-button
        height: 32px !important
        line-height: 32px !important
      .jx-btn.el-button /deep/ span
        color: #fff
        line-height: 32px
        padding: 0 5px
        margin: 0
      /deep/ .el-checkbox__inner
        width: 14px
        padding: 0
        margin-right: 0
      /deep/ .el-checkbox__input
        padding: 0
        margin-right: 0
      /deep/ .el-checkbox__label
        padding: 0
        padding-left: 10px
        margin-right: 0
</style>
